<template>
	<view class="container">
		<view class="">
			<TopBtn :title="'更换手机号'"></TopBtn>
		</view>
		<view class="textInfo">
			验证手机
			<view class="">
				检测到您当前登录的手机号为：
			</view>
			{{data.mobile}}
		</view>
		<view class="form">
			<view class="formBtm">
				<uni-easyinput type="text" :clearable='false' v-model="formData.mobile" placeholder="请输入完整手机号" />
				<!-- <view class="inputBoxRight">
					<uni-easyinput type="text" :clearable='false' v-model="formData.code" placeholder="请输入短信验证码" />
					<text class="right">| <text class="yzm" @click="startCountDown()">{{countdown==60?'获取验证码':countdown}}</text>
					</text>
				</view> -->
				<view :class="formData.mobile==''?'btn Disabled':'btn'" @click="checkMobile('form')">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				formData: {
					radio: false,
					mobile: "",
					code: ""
				},
				countdown: 60,
				data: {},
			}
		},
		onLoad() {
			this.getMobile()
		},
		methods: {
			startCountDown() {
				if (this.countdown == 60) {
					this.getSendSMSCode()
					let timer = setInterval(() => {
						if (this.countdown > 1) {
							this.countdown--;
						} else {
							clearInterval(timer);
							// 清除定时器
							this.countdown = 60
						}
					}, 1000);
				}
			},
			checkMobile() {
				if (this.formData.mobile) {
					checkMobile({
						mobile: this.formData.mobile,
					}).then(res => {
						if (res.data) {
							this.goinfo('pages/my/system/ChangePhone/newPhone/newPhone')
						} else {
							// uni.showToast({
							// 	title: '当前手机号验证失败，请重新输入',
							// 	icon: "none",
							// 	duration: 2000
							// });
						}
					});
				} else {
					uni.showToast({
						title: '请输入正确手机号',
						icon: "none",
						duration: 2000
					});
				}

			},
			getSendSMSCode() {
				sendSmsCode({
					mobile: this.data.phone,
					scene: "1"
				}).then(res => {

				});
			},
			getMobile(ref) {
				getMobile().then(res => {
					this.data = res.data
				});

			},
			Back() {
				//uni.navigateBack()//默认delta:1
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			goinfo(e, id) {
				if (id) {
					uni.navigateTo({
						url: `/${e}?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: `/${e}`
					})
				}
			},
			switchTab() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #fff;
		min-height: 100vh;

		.textInfo {
			font-weight: 800;
			font-size: 40rpx;
			color: #333333;
			text-align: center;
			margin: 178rpx auto 0rpx;
			width: 100%;

			view {
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				margin: 25rpx 35rpx;
			}
		}

		.inputBoxRight {
			position: relative;
			margin-bottom: 24rpx;

			.right {
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
				font-size: 30rpx;
				color: #999999;

				.yzm {
					display: inline-block;
					width: 150rpx;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #7B66FE;
				}
			}

			/deep/.uni-input-wrapper {
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			/deep/.uni-input-placeholder {
				left: 10rpx;
			}

		}

		.loginWx {
			margin-top: 40rpx;
			text-align: center;

			image {
				width: 59rpx;
				height: 59rpx;
			}
		}

		.report {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;

			.xian {
				width: 209rpx;
				height: 4rpx;
				background-color: #EEEEEE;
			}
		}

		.business {
			font-size: 28rpx;
			font-weight: bold;
			text-decoration: underline;
			color: #7B66FE;
			line-height: 28rpx;
			text-align: center;
			margin: 24rpx 0 35rpx;
		}

		.title {
			font-size: 50rpx;
			font-weight: bold;
			color: #FFFFFF;

			&>view {
				view {
					margin-top: 17rpx;
					font-size: 26rpx;
					font-weight: 500;
				}
			}
		}



		.form {
			width: 690rpx;
			min-height: 553rpx;
			padding: 69rpx 0;
			margin: auto;
			border-radius: 20rpx;

			.formTop {
				width: 300rpx;
				height: 107rpx;
				line-height: 107rpx;
				padding-left: 19rpx;
				box-sizing: border-box;
				font-size: 34rpx;
				font-weight: bold;
				text-align: center;
				color: #333333;
				background: #fff;
				border-radius: 20rpx 20rpx 0 0;
			}

			.formBtm {
				padding: 30rpx 74rpx;
				background: #fff;
				box-sizing: border-box;
				border-radius: 0 20rpx 20rpx 20rpx;

				.agreement {
					margin-top: 27rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #999999;

					line-height: 30rpx;

					/deep/.uni-radio-input {
						width: 22rpx;
						height: 22rpx;
					}

				}

				.btn {
					width: 545rpx;
					height: 90rpx;
					background: linear-gradient(103deg, #DB88FC 0%, #7B66FE 100%);
					box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(42, 41, 48, 0.35);
					border-radius: 45rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 79rpx;
					text-align: center;
					margin-top: 65rpx;
				}

				.Disabled {
					background: linear-gradient(103deg, #DB88FC80 0%, #7B66FE80 100%);
				}

				/deep/.uni-forms-item__label {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				/deep/.uni-easyinput__content {
					width: 546rpx;
					height: 91rpx;
					background: #F1F7FC !important;
					border-radius: 46rpx;
					font-size: 24rpx
				}
			}
		}
	}
</style>